<template>
  <div class="containerOverview" id="mainLayout">
    <div class="leftContainer">
      <div style="height: 270px" ref="leftEcharts1" id="leftEcharts1"></div>
      <div style="height: 270px" ref="leftEcharts2" id="leftEcharts2"></div>
      <div style="height: 270px" ref="leftEcharts3" id="leftEcharts3"></div>
    </div>
    <div class="centerContainer">
      <div class="containerTop">
        <h2 class="liStyleSHow" style="font-size: 24px; color: #c2ecff">
          数据总量
          <span
            ><el-statistic
              group-separator=","
              :value="sjzl"
              class="topH2Style"
            ></el-statistic></span
          >条记录
        </h2>
        <div class="centerBox">
          <ul class="flexContainer">
            <li class="liStyleSHow">
              航迹:
              <span
                ><el-statistic
                  group-separator=","
                  :value="dataVolumes.jcsjj"
                  style="color: #c4ebff"
                ></el-statistic
              ></span>
            </li>
            <li class="liStyleSHow">
              真值:
              <span
                ><el-statistic
                  group-separator=","
                  :value="dataVolumes.zlsjj"
                ></el-statistic
              ></span>
            </li>
            <li class="liStyleSHow">
              频谱:
              <span
                ><el-statistic
                  group-separator=","
                  :value="dataVolumes.cssjj"
                ></el-statistic
              ></span>
            </li>
            <li class="liStyleSHow">
              凝聚后点迹:
              <span
                ><el-statistic
                  group-separator=","
                  :value="dataVolumes.cjsjj"
                ></el-statistic
              ></span>
            </li>
            <li class="liStyleSHow">
              凝聚前点迹:
              <span
                ><el-statistic
                  group-separator=","
                  :value="dataVolumes.ctj"
                ></el-statistic
              ></span>
            </li>
          </ul>
        </div>
      </div>
      <div
        class="centerContainerBottom"
        ref="heatMap"
        id="heatMap"
        style="width: 100%; height: 700px"
      ></div>
      <div
        class="centerContainerBottomSeg"
        style="display: flex; justify-content: center"
      >
        <el-radio-group
          v-model="tabsValue"
          style="margin: 0 auto"
          @change="selectSemented"
        >
          <el-radio-button
            :label="item"
            v-for="item in monthList"
            :key="item"
            >{{ item }}</el-radio-button
          >
        </el-radio-group>
      </div>
    </div>
    <div class="rightContainer">
      <div style="height: 270px" ref="rightEcharts1" id="rightEcharts1"></div>
      <div style="height: 270px" ref="rightEcharts2" id="rightEcharts2"></div>
      <div style="height: 270px" ref="rightEcharts3" id="rightEcharts3"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "@/assets/styles/dataoverview.scss";
import moment from "moment";
import { worldMap } from "@/assets/mapJson/worldMap";
import { nameMapData } from "@/assets/mapJs/common";
//注册中国地图
echarts.registerMap("worldMap", worldMap, {});
import {
  getDataoverViewList,
  getListPathByFlightType,
  getAirPlaneLocation,
  getDict,
  getFlightFrequencyList,
} from "@/api/service";
export default {
  name: "",
  components: {},
  data() {
    return {
      tabsValue: "",
      dataVolumes: [],
      hotDoatData: [], //热力图数据
      listDatas: [],
      monthList: [],
      marks: [
        {
          label: "一月",
          value: 1,
        },
        {
          label: "二月",
          value: 2,
        },
        {
          label: "三月",
          value: 3,
        },
        {
          label: "四月",
          value: 4,
        },
        {
          label: "五月",
          value: 5,
        },
        {
          label: "六月",
          value: 6,
        },
        {
          label: "七月",
          value: 7,
        },
        {
          label: "八月",
          value: 8,
        },
        {
          label: "九月",
          value: 9,
        },
        {
          label: "十月",
          value: 10,
        },
        {
          label: "十一月",
          value: 11,
        },
        {
          label: "十二月",
          value: 12,
        },
      ],
      sjzl: 0,
      barChartsData: { label: [], value: [] },
      rabarChartsData: [],
      mapGeoData: null,
      forChartsMapData: [],
      echartsData: [],
      selectStartMonth: moment().startOf("month").format("YYYY-MM-DD"),
      selectEndMonth: moment().endOf("month").format("YYYY-MM-DD"),
      graph: null,
      data: [],
      pieChartsData: [],
      frequencyData: [],
      frequencyDataBar: {
        frequencyNames: [],
        frequencyNums: [],
      },
      pieData: [],
      wordChartsData:[]
    };
  },
  mounted() {
    getDict("sys_target_type").then((res) => {
      console.log("frequencyData", res.data);
      if (res.code === 200) {
        this.frequencyData = res.data;
      }
    });

    setTimeout(() => {
      this.getMonths();
      let data = {
        startTime: this.selectStartMonth,
        endTime: this.selectEndMonth,
        flightType: this.frequencyData[0].dictSort,
      };
      this.handleGetListPathByFlightType(data);
    }, 500);
    getAirPlaneLocation().then((res) => {
      console.log("getAirPlaneLocation", res);
      if (res.code == 200) {
        // setMapGeoData(res.data);
        let objMapGeo = {};
        res.data.forEach((item) => {
          objMapGeo[item.airPortName] = [item.longitude, item.latitude];
        });
        console.log("echarts中的数据", objMapGeo);
        this.mapGeoData = objMapGeo;
        let dataMap = res.data.map((item) => {
          return { name: item.airPortName, value: 9 };
        });
        console.log("echarts中的数据", dataMap);
        this.forChartsMapData = dataMap;
      }
    });
  },
  methods: {
    initEcharts() {
      //leftEcharts1
      const leftEcharts1 = echarts.init(this.$refs.leftEcharts1);
      let leftoption1 = {
        title: {
          text: "目标类型统计",
          textStyle: {
            color: "#ccc",
          },
        },
        grid: {
          left: "4%",
          bottom: "11%",
          right: "6%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
        },
        yAxis: {
          type: "category",
          data: this.barChartsData.label,
        },
        series: [
          {
            type: "bar",
            data: this.barChartsData.value,
          },
        ],
      };
      leftEcharts1.setOption(leftoption1);
      leftEcharts1.on("click", function (params) {
        let fType = 0;
        for (let i in this.echartsData) {
          if (params.value == this.echartsData[i].exploreNum) {
            fType = this.echartsData[i].flightType;
          }
        }
        let data = {
          startTime: this.selectStartMonth,
          endTime: this.selectEndMonth,
          flightType: fType,
        };
        this.handleGetListPathByFlightType(data);
      });

      // leftEcharts2
      const leftEcharts2 = echarts.init(this.$refs.leftEcharts2);
      let leftOption2 = {
        tooltip: {
          trigger: "axis",
        },
        title: {
          text: "目标类型统计",
          textStyle: {
            color: "#ccc",
          },
        },
        radar: {
          indicator: this.rabarChartsData,
        },
        series: [
          {
            type: "radar",
            label: {
              show: true,
            },
            areaStyle: {},
            data: [
              {
                value: this.barChartsData.value,
              },
            ],
          },
        ],
      };
      document
        .getElementById("leftEcharts2")
        .removeAttribute("_echarts_instance_");
      leftEcharts2.setOption(leftOption2);

      // leftEcharts3
      const leftEcharts3 = echarts.init(this.$refs.leftEcharts3);
      let leftOption3 = {
        title: {
          text: "目标类型统计",
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: this.pieChartsData,
          },
        ],
      };
      leftEcharts3.setOption(leftOption3);
    },
    initEchartsHot() {
      //中间热力图
      const heatMap = echarts.init(this.$refs.heatMap);
      let heatMapOption = {
        backgroundColor: "#0e2e50",
        title: {
          // text: '热力图',
          subtext: "",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: false,
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return `经度: ${params?.value[0]}<br />纬度: ${params?.value[1]}`;
          },
        },
        visualMap: {
          show: true,
          type: "continuous",
          min: 0,
          max: 10,
          calculable: true,
          orient: "vertical",
          left: "left",
          bottom: "15%",
          dimension: 1,
          inRange: {
            color: ["blue", "yellow", "red"],
          },
        },
        nameMap: nameMapData,
        geo: {
          map: "worldMap",
          label: {
            emphasis: {
              show: false,
            },
          },
          regions: [
            {
              name: "211",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
                fontSize: 0,
              },
            },
          ],
          // 把中国地图放大了1.2倍
          zoom: 8, //15
          roam: true,
          center: [134.775265, 38.849163],
          itemStyle: {
            normal: {
              areaColor: "rgba(20, 41, 87,0.6)",
              borderColor: "#195BB9",
              borderWidth: 1,
            },
            emphasis: {
              areaColor: "#2B91B7",
            },
          },
        },
        series: [
          {
            type: "heatmap",
            coordinateSystem: "geo",
            data: this.hotDoatData,
            pointSize: 10, //设置热力图上的点大小
            symbolSize: 200,
            blurSize: 10,
            // progressive: 400
          },
          {
            // name: '基地',
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.convertData(this.forChartsMapData),
            colorBy: "data",
            zlevel: 2,
            rippleEffect: {
              color: "#7ed3f4",
              period: 4,
              scale: 4,
              brushType: "stroke",
            },
            symbolSize: 6,
            symbol: "circle",
            label: {
              normal: {
                show: true, //显示市区标签
                textStyle: { color: "#ccc", fontSize: "16px" }, //省份标签字体颜色
                formatter: (params) => {
                  return params?.data?.[3];
                },
                position: ["-130%", "150%"],
              },
              emphasis: {
                //对应的鼠标悬浮效果
                show: false, //关闭文字 （这东西有问题得关）
                textStyle: { color: "transparent" },
              },
            },
          },
        ],
      };
      document.getElementById("heatMap").removeAttribute("_echarts_instance_");
      heatMap.setOption(heatMapOption);
    },
    initEchartsRight() {
      //rightEcharts1
      const rightEcharts1 = echarts.init(this.$refs.rightEcharts1);
      let rightOption1 = {
        title: {
          text: "频率分布",
          textStyle: {
            color: "#ccc",
          },
        },
        grid: {
          left: "2%",
          bottom: "11%",
          right: "6%",
          containLabel: true,
        },
        xAxis: {
          data: this.frequencyDataBar.frequencyNames,
        },
        tooltip: {
          trigger: "axis",
        },
        yAxis: {},
        series: [
          {
            data: this.frequencyDataBar.frequencyNums,
            type: "bar",
          },
        ],
      };
      document
        .getElementById("rightEcharts1")
        .removeAttribute("_echarts_instance_");
      rightEcharts1.setOption(rightOption1);

      //rightEcharts2
      const rightEcharts2 = echarts.init(this.$refs.rightEcharts2);
      let rightOption2 = {
        title: {
          text: "频率分布",
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: [10, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: this.pieData,
          },
        ],
      };
      document
        .getElementById("rightEcharts2")
        .removeAttribute("_echarts_instance_");
      rightEcharts2.setOption(rightOption2);

      //rightEcharts3
      const rightEcharts3 = echarts.init(this.$refs.rightEcharts3);
      let data = this.wordChartsData
      let rightOption3 = {
        title: {
        text: '词云图',
        textStyle: {
          color: '#ccc',
        },
      },
      xAxis: {
        show: false,
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          type: 'custom',
          renderItem: (params, api) => {
            const x = Math.floor(Math.random() * 160);
            const y = Math.floor(Math.random() * 160);
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            ctx.font = api.value(0) + '';
            const { width } = ctx.measureText(data[params.dataIndex].name);
            return {
              type: 'text',
              x: x + width,
              y,
              style: {
                text: data[params.dataIndex].name,
                fontSize: data[params.dataIndex].value,
                fill: `rgba(${Math.floor(Math.random() * 256)},${Math.floor(
                  Math.random() * 256,
                )},${Math.floor(Math.random() * 256)},${Math.random()})`,
              },
            };
          },
          data: data,
        },
      ],
      }
      document
        .getElementById("rightEcharts3")
        .removeAttribute("_echarts_instance_");
      rightEcharts3.setOption(rightOption3);
    },
    filterData(value) {
      let data =
        this.frequencyData &&
        this.frequencyData.filter((item) => {
          return item?.dictValue == value;
        });
      console.log("filterData", data[0]?.dictLabel, frequencyData);
      return data[0]?.dictLabel;
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.mapGeoData[data[i].name];
        if (geoCoord) {
          res.push(geoCoord.concat(data[i].value).concat(data[i].name));
        }
      }
      return res;
    },
    getMonths() {
      const moment = require("moment");
      for (let i = 2; i >= 0; i--) {
        let lastMonth = moment().subtract(i, "months").month() + 1;
        this.marks.forEach((item) => {
          if (item.value === lastMonth) {
            this.monthList.push(item.label);
          }
        });
      }
      this.tabsValue = this.monthList[this.monthList.length - 1]; // 当前月选中
      console.log("getMonths:", this.tabsValue);
      this.selectSemented(this.tabsValue);
    },
    selectSemented(val) {
      console.log(222, val);
      let year = moment().get("year");
      let month = 0;
      this.marks.forEach((item) => {
        if (item.label === val) {
          console.log(item.value.toString().length);
          month =
            item.value.toString().length < 2
              ? "0" + item.value.toString()
              : item.value.toString();
        }
      });
      let data = {
        statMonth: `${year}-${month}`,
      };
      this.selectStartMonth = moment(`${year}-${month}-01`)
        .startOf("month")
        .format("YYYY-MM-DD");
      this.selectEndMonth = moment(`${year}-${month}-01`)
        .endOf("month")
        .format("YYYY-MM-DD");
      console.log(
        197,
        data,
        this.selectStartMonth,
        this.selectEndMonth,
        this.frequencyData
      );
      // this.setSelectTimeValue(data);
      this.getPageData(data);
    },
    setSelectTimeValue() {},
    getPageData(data) {
      getDataoverViewList(data).then((res) => {
        console.log(res);
        this.barChartsData = { label: [], value: [] };
        this.rabarChartsData = [];
        if (res.code == 200 && res?.data) {
          res.data.dataVolumes.forEach((item) => {
            switch (item.statType) {
              case 0:
                this.sjzl = item.statValue;
                break;
              case 2:
                this.dataVolumes.jcsjj = item.statValue;
                break;
              case 4:
                this.dataVolumes.zlsjj = item.statValue;
                break;
              case 7:
                this.dataVolumes.cssjj = item.statValue;
                break;
              case 5:
                this.dataVolumes.cjsjj = item.statValue;
                break;
              default:
                this.dataVolumes.ctj = item.statValue;
            }
          });
          let params = {
            startTime:
              moment(data.statMonth).startOf("month").format("YYYY-MM-DD") ||
              moment().startOf("month").format("YYYY-MM-DD"),
            endTime:
              moment(data.statMonth).endOf("month").format("YYYY-MM-DD") ||
              moment().endOf("month").format("YYYY-MM-DD"),
            flightType: res?.data?.targetTypeTops?.[0]?.flightType,
          };
          if (res?.data?.targetTypeTops?.[0]?.flightType) {
            console.log(411, params);
            // getFrequencyListHandle(params);
            this.handleGetListPathByFlightType(params);
            let echartsData = (this.echartsData = res.data.targetTypeTops.slice(
              0,
              5
            ).reverse());
            if (echartsData.length > 0) {
              echartsData.forEach((item) => {
                console.log(item.flightType);
                let label = "";
                this.frequencyData.forEach((item1) => {
                  if (item.flightType == item1.dictValue) {
                    label = item1.dictLabel;
                  }
                });
                // Top6
                this.barChartsData.label.push(label);
                this.barChartsData.value.push(item.exploreNum);

                //雷达
                  this.rabarChartsData.push({
                    name: label,
                    max: item.exploreNum + 30,
                  });

                //扇形
                this.pieChartsData.push({
                  name: label,
                  value: item.exploreNum,
                });

                // 词云图
                this.wordChartsData.push({
                  name: label,
                  value: Math.sqrt(item.exploreNum * 0.4) * 5,
                });
              });
              this.initEcharts();
            }
          }
        } else {
          this.$modal.msgSuccess("未查询到数据");
        }
      });

      let params = {
        startTime: this.selectStartMonth,
        endTime: this.selectEndMonth,
        flightType: this.frequencyData[0].dictSort,
      };
      console.log("this.frequencyData", this.frequencyData, params);
      getFlightFrequencyList(params).then((res) => {
        console.log("getFlightFrequencyList", res);
        if (res.code == 200 && res.data) {
          this.frequencyDataBar = res.data;
          let dataSource = res?.data?.frequencyNames
            .map((item, index) => {
              return {
                value: res?.data?.frequencyNums[index],
                name: res?.data?.frequencyNames[index],
              };
            })
            ?.sort((a, b) => a.value - b.value); //从小到大排序
          this.pieData = dataSource;
          this.initEchartsRight();
        }
      });
    },
    //频率
    //获取飞行航迹的展示
    handleGetListPathByFlightType(params) {
      getListPathByFlightType(params).then((res) => {
        if (res.code == 200) {
          let dataSouce3 = [];
          let dataSouce2 = res?.data
            ?.map((item) => {
              return item?.locationList?.map((iten) => {
                return [iten?.longitude, iten?.latitude, undefined];
              });
            })
            .filter((itex) => {
              return itex;
            })
            .map((itey) => {
              console.log(2222, itey);
              return dataSouce3.push(...itey);
            });
          // console.log("hotDoatData:", dataSouce3);
          this.hotDoatData = dataSouce3;
          this.initEchartsHot();
        }
      });
    },
    radarBtnClick(val) {
      console.log("radarBtnClick", val);
      switch (val) {
        case "editFlowChart":
          this.$router.push({
            path: "/dataAnalysis/editFlowChart",
            query: {},
          });
          break;
        case "radarSpectrum":
          this.$router.push({
            path: "/dataAnalysis/spotevalution8203",
            query: {},
          });
          break;
        case "radarPlot":
          this.$router.push({
            path: "/dataAnalysis/spotevalutionyangben",
            query: {},
          });
          break;
        case "matchingRelation":
          this.$router.push({
            path: "/dataAnalysis/relateform",
            query: {},
          });
          break;
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-statistic .con .number {
  color: #c4ebff;
}
::v-deep .topH2Style .con .number {
  font-size: 32px;
}
</style>
